<!--
 * @Author: 祝肖 1738052358@qq.com
 * @Date: 2023-11-03 16:00:11
 * @LastEditTime: 2024-02-23 09:45:50
 * @LastEditors: 冯尚新 fengshangxin@yunjinhz.com
 * @Description: 零售户信息列表页面  -- 行业
 * @FilePath: \zmglpt-ui-mobile-v1.1\dev\pages\query\coordinateAcquisit\retailerList.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->

<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" backText="返回" title="零售户列表" :custom-back="goBack"></theme-navbar>
    <!-- #endif -->
    <view class="nolicence-search-lay" :style="{ 'top': isHideNav ? 0 : '44px' }">

      <view class="u-search-btn">
        <u-search shape="round" :clearabled="true" :showAction="true" actionText="确定" :animation="true"
          placeholder="许可证、企业字号、持证人、地址、电话等" v-model="keyword" @custom="handlerSearch" @focus="handleFocus"
          ></u-search>
          <!-- @blur="handleBlur" -->
        <view class="search-right-icon u-flex">
          <u-icon name="scan" size="38" @click="onScan()" v-if="showScan"></u-icon>
        </view>
      </view>
    </view>
    <view class="content-list">
      <me-table :i="0" :top="138" :index="0" :load-data="loadData" :init-load="false" ref="mescrollItem0">
        <view class="re-list" slot-scope="d">
          <view class="re-content">
            <view class="re-manager" @click="viewRetailerDetail(d.data)">
              <text class="re-title">
                {{ d.data.companyName }}
              </text>
              <u-tag style="flex-shrink: 0; height: fit-content" :spStyle="getSpStyle(d.data)" v-if="d.data.licStatus"
                mode="dark" shape="circle" :text="d.data.licStatusName"></u-tag>
              <text class="re-tit"></text>
            </view>
            <view class="re-subtitle" @click="viewRetailerDetail(d.data)">
              {{ d.data.businessAddr }}
            </view>
            <view class="re-icon">
              <u-row>
                <u-col span="6" style="padding-left: 0px">
                  <u-icon :label="d.data.managerName || ''" size="30" name="/static/check/manager.png"></u-icon>
                </u-col>
                <u-col span="6">
                  <u-icon :label="d.data.retailTel || ''" size="30" name="phone"
                    @click="modelConfirm(d.data.retailTel)"></u-icon>
                </u-col>
              </u-row>
            </view>
            <!-- 提示框 modelContent -->
            <u-modal v-model="modelShow" :content="modelContent" @confirm="doPhoneNew(d.data.retailTel)"></u-modal>
          </view>
        </view>
      </me-table>
    </view>
  </view>
</template>

<script>
import MeTable from '@/components/me-table.vue';
import { AMapMixin, } from '@/common/AMapMixin.js';
import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js';
import certificateService from '@/service/certificate/certificate.service.js';
import checkService from '@/service/check/check.service';
import { L_LIC_STATUS, } from '@/service/query/mapping/enum.js';
import { SET_MAP_LAT_LON, } from '@/config/setting.config.js';
import UIcon from '../../../uview-ui/components/u-icon/u-icon.vue';
const sysCodeColors = {
  '07': {
    color: '#EC7C37',
    borderColor: '#EC7C37',
    backgroundColor: '#FBE2D3',
  },
  '04': {
    color: '#01A79A',
    borderColor: '#01A79A',
    backgroundColor: '#C0ECE2',
  },
  '01': {
    color: '#AC0000',
    borderColor: '#AC0000',
    backgroundColor: '#F2CCCC',
  },
  '06': {
    color: '#FF9E2C',
    borderColor: '#FF9E2C',
    backgroundColor: '#FFF3E6',
  },
  '08': {
    color: '#0079F2',
    borderColor: '#0079F2',
    backgroundColor: '#E0ECFF',
  },
  '02': {
    color: '#717579',
    borderColor: '#717579',
    backgroundColor: '#EDEEEF',
  },
  '05': {
    color: '#20AB5C',
    borderColor: '#20AB5C',
    backgroundColor: '#DBF4E6',
  },
  '03': {
    color: '#FF9E2C',
    borderColor: '#FF9E2C',
    backgroundColor: '#FFF3E6',
  },
};
export default {
  components: {
    MeTable,
  },
  mixins: [MescrollMoreMixin, AMapMixin,],
  data() {
    return {
      modelShow: false,
      modelContent: '',
      keyword: '',
      longitude: '',
      latitude: '',
      tels: [],
      user: this.$storage.get(this.$rp.common.USER),
      retailData: [],
      firstNoLoad: false,
      showScan: true,
      // optValue: {}
    };
  },
  onLoad(opt) {
    // this.optValue = opt
  },
  methods: {
    handleFocus() {
      this.showScan = false;
    },
    // handleBlur() {
    //   this.showScan = true;
    // },
    initAmap() { },
    handlerSearch() {
      if (this.$u.test.isEmpty(this.keyword)) {
        this.$u.toast('请输入关键字');
        return;
      }
      this.showScan = true;
      this.$refs['mescrollItem0'].refresh();
    },
    getSpStyle(it) {
      if (it.licStatus == L_LIC_STATUS.SHUT_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.ORDER_SHUT_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.CANCEL_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.CLOSE_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.WITHDRAW_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.REVOKE_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.RECALL_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.NORMAL_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      }
    },
    // 零售户列表数据查询
    loadData(page) {
      // this.longLatit()
      let self = this;
      const orgUuid = this.user.orgUuid || ''
      if (!orgUuid) {
        return this.$u.toast('组织信息获取异常')
      }
      let param = {
        keyWord: this.keyword,
        orgUuid: orgUuid
      };
      return new Promise((resolve) => {
        this.longLatit().then(() => {
          // if (!this.firstNoLoad) {
          //   this.firstNoLoad = true;
          //   resolve({
          //     count: 0,
          //     data: [],
          //   });
          //   return;
          // }
          param.licStatus = ['01', '02', '10',];
          certificateService
            .getRetailerListByApp(page.num, page.size, param)
            .then((res) => {
              if (res.success) {
                resolve({
                  count: res.count,
                  data: [...res.data,],
                });
              } else {
                resolve({
                  count: 0,
                  data: [],
                });
              }
            })
            .catch((e) => {
              resolve({
                count: 0,
                data: [],
              });
            });
        });
      });
    },
    longLatit() {
      let self = this;
      return new Promise((resolve) => {
        if (this.$deviceApi.geolocation) {
          this.$deviceApi.geolocation().then((res) => {
            self.longitude = res.longitude;
            self.latitude = res.latitude;
            resolve();
          });
        } else {
          self.longitude = SET_MAP_LAT_LON[0];
          self.latitude = SET_MAP_LAT_LON[1];
          resolve();
        }
      });
    },
    // 扫描按钮
    onScan() {
      this.$deviceApi.scan && this.$deviceApi.scan().then((code) => {
        let licNo = this.getLicenseCode(code);
        if (this.$u.test.isEmpty(licNo)) {
          this.$u.toast('二维码无法识别：' + code);
          return;
        }
        this.getRetailerByCode(licNo);
      }).catch((error) => {
        this.$u.toast(error);
      });
    },
    getLicenseCode(scanRetailerInfo) {
      let index = scanRetailerInfo.indexOf('许可证号:');
      let qCodeStr = '';
      let lic = '';
      if (index != -1) qCodeStr = scanRetailerInfo.substring(index, scanRetailerInfo.indexOf(','));
      !qCodeStr && (qCodeStr = scanRetailerInfo.substring(0, 12));
      if (!qCodeStr) {
        lic = '';
      }
      let matches = qCodeStr.match(/[0-9]+/);
      if (matches.length > 0) lic = matches[0]; // 识别成功
      if (!this.$u.test.isEmpty(lic)) {
        try {
          lic = this.$u.trim(lic);
        } catch (e) {
          console.log(e);
        }
      }
      return lic;
    },
    getRetailerByCode(code) {
      certificateService
        .getRetailerListByLicenseCodes({
          keyWord: code,
          page: 1,
          limit: 10
        })
        .then((rt) => {
          if (rt.success && rt.data.length > 0) {
            this.viewRetailerDetail(rt.data[0]);
          } else {
            this.$u.toast(rt.msg);
          }
        })
        .catch((error) => {
          this.$u.toast(error);
        });
    },
    // 查看零售户详情
    viewRetailerDetail(retailer) {
      this.$u.route('pages/query/coordinateAcquisit/infoAndRetailer', { retailerUuid: retailer.retailerUuid });
    },
    // 电话显示
    handlerShowPhone(e, retailerUuid) {
      this.$u.loading('查询中...');
      this.tels = [];
      checkService.retailerTels(retailerUuid).then((dr) => {
        this.$u.hideLoading();
        if (dr.success) {
          let telDatas = dr.data;
          telDatas.forEach((t) => {
            t.tel && this.tels.push(t.name + ' ' + t.tel);
          });
          uni.showActionSheet({
            itemList: this.tels,
            itemColor: '#007aff',
            success: ({ tapIndex, }) => this.doPhone(this.tels[tapIndex]),
          });
        }
      });
    },
    // 拨打电话
    doPhone(telStr) {
      let tel = telStr.substring(telStr.indexOf(' '));
      this.$deviceApi.makePhoneCall(tel);
    },
    // 拨打电话
    doPhoneNew(telStr) {
      if (this.$u.test.isEmpty(telStr)) return;
      // #ifdef H5-DINGDING
      this.$deviceApi.makePhoneCall(telStr);
      // #endif
      // #ifndef H5-DINGDING
      this.$u.toast('H5不支持打电话');
      // #endif
    },
    modelConfirm() {
      this.modelShow = true;
      this.modelContent = '是否打给零售户';
    },
    updateBackState(params){
      console.log(params)
      this.$u.toast('采集成功');
    },
  },
};
</script>

<style lang="scss" scoped>
@import 'style/certificate/common.scss';

.page {
  padding: 0;
}

.search-right-icon {
  display: flex;
  position: absolute;
  right: 10%;
}

.u-search-btn {
  height: 44px;
  line-height: 44px;
  // padding: 0 10px;
  display: flex;
  align-items: center;
  margin: 0 20rpx;

  .u-confirm-btn {
    height: 32px;
    margin-left: 10px;
  }
}

.content-list {
  background-color: #f3f4f5;
}

.nolicence-search-lay {
  background-color: #fff;
  position: fixed;
  // #ifndef H5-DINGDING
  top: 44px;
  // #endif
  // #ifdef H5-DINGDING
  top: 0px;
  // #endif
  z-index: 999;
  width: 100%;
  overflow: hidden;
  padding: $cm-search-padding-row $cm-search-padding-column;
}

.re-list {
  margin: 20rpx;
  color: #666666;
  font-size: 15px;
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  -webkit-flex-direction: row;
  background-color: #fff;
  border-radius: 12px;
  padding: 12px;
}

.re-media {
  padding-right: 10px;
  vertical-align: middle;
}

.re-content {
  width: 100%;

  .re-manager {
    display: flex;
    justify-content: space-between;

    .re-title {
      width: calc(90%);
      font-size: 15px;
      color: #666;
      font-weight: 600;
      margin-bottom: 5px;
      width: 80%;
    }
  }

  .re-subtitle {
    padding-top: 5px;
    color: #666;
  }

  .re-icon {
    display: flex;
    padding-top: 10px;
  }
}

/deep/.u-line {
  flex-shrink: 0;
}
</style>
